<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./scripts/vue.js"></script>
</head>

<body>

  <pre>

    1、由于 JavaScript 的限制，Vue 不能检测以下数组的变动
      例如:
        1、通过索引给 data 中的数据赋值，更新，检测不到
        2、更改 数组的长度，检测不到
        3、动态给 对象添加属性，检测不到

    2、解决方案
      Vue.set 或者  vm.$set
    
  </pre>


  <div id="app">
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        value: '',
        arr: [1, 2, 3, 4]
      }
    })

    // vm.arr[0] = '哈哈哈'
    // Vue.set(vm.arr, 0, '哈哈哈')
    vm.$set(vm.arr, 0, '哈哈哈')
  </script>
</body>

</html>